<template>
  <ContentWrap>
    <el-form
      ref="formRef"
      :model="importColumns"
      :rules="formRules"
      label-width="0px"
      :inline-message="true"
    >

    <el-table ref="dragTable" :data="importColumns" :max-height="tableHeight" row-key="columnId">
      <el-table-column label="字段名称" min-width="10%">
        <template #default="{ row, $index }">
          <el-form-item :prop="`${$index}.javaField`" :rules="formRules.javaField" >
            <el-input v-model="row.javaField" placeholder="请输入字段名称" />
          </el-form-item>
        </template>
      </el-table-column>

      <el-table-column label="字段描述" min-width="10%">
        <template #default="{ row, $index }">
          <el-form-item :prop="`${$index}.columnComment`" :rules="formRules.columnComment" >
            <el-input v-model="row.columnComment" placeholder="请输入字段描述" />
          </el-form-item>
        </template>

      </el-table-column>

      <el-table-column label="Java类型" min-width="11%">
        <template #default="{ row, $index }">
          <el-form-item :prop="`${$index}.javaType`" :rules="formRules.javaType" >
          <el-select v-model="row.javaType">
            <el-option label="Long" value="Long" />
            <el-option label="String" value="String" />
            <el-option label="Integer" value="Integer" />
            <el-option label="Double" value="Double" />
            <el-option label="BigDecimal" value="BigDecimal" />
            <el-option label="LocalDateTime" value="LocalDateTime" />
            <el-option label="Boolean" value="Boolean" />
          </el-select>
          </el-form-item>
        </template>
      </el-table-column>


      <el-table-column label="允许空" min-width="10%">
        <template #default="scope">
          <el-checkbox v-model="scope.row.nullable" />
        </template>
      </el-table-column>
      <el-table-column label="批注" min-width="10%">
        <template #default="row, $index">
          <el-form-item :prop="`${$index}.note`" :rules="formRules.note" >
            <el-input v-model="row.note" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="字典类型" min-width="12%">
        <template #default="row, $index">
          <el-form-item :prop="`${$index}.dictType`" :rules="formRules.dictType" >
          <el-select v-model="row.dictType" clearable filterable placeholder="请选择">
            <el-option
              v-for="dict in dictOptions"
              :key="dict.id"
              :label="dict.name"
              :value="dict.type"
            />
          </el-select>
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="下拉显示方法" min-width="10%">

        <template #default="row, $index">
          <el-form-item :prop="`${$index}.functionName`" :rules="formRules.functionName" >
          <el-input v-model="row.functionName" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column label="示例" min-width="10%">
        <template #default="row, $index">
          <el-form-item :prop="`${$index}.example`" :rules="formRules.example" >
            <el-input v-model="row.example" />
          </el-form-item>
        </template>
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="60">
        <template #default="{ $index }">
          <el-button @click="handleDelete($index)" link>—</el-button>
        </template>
      </el-table-column>
    </el-table>
    </el-form>
    <el-row justify="center" class="mt-3">
      <el-button @click="handleAdd" round>+ 添加选项</el-button>
    </el-row>
  </ContentWrap>


</template>
<script lang="ts" setup>
import { PropType } from 'vue'
import * as CodegenApi from '@/api/infra/codegen'
import * as DictDataApi from '@/api/system/dict/dict.type'
import { DICT_TYPE, getIntDictOptions,getBoolDictOptions } from '@/utils/dict'
defineOptions({ name: 'InfraCodegenColumInfoForm' })
const props = defineProps({
  tableId: {
    type:  Number,
    default: () => null
  },
  importColumns: {
    type: Array as unknown as PropType<CodegenApi.ImportColumnVO[]>,
    default: () => null
  }
})
const importFormData = ref<CodegenApi.ImportColumnVO[]>([])
const tableHeight = document.documentElement.scrollHeight - 350 + 'px'

const formRef = ref()
const formRules = reactive({
  javaField: [{ required: true, message: '字段名称不能为空', trigger: 'blur' }],
  columnComment: [{ required: true, message: '字段描述不能为空', trigger: 'blur' }],
  javaType: [{ required: true, message: 'java类型不能为空', trigger: 'blur' }],
})

watch(
  () => props.importColumns,
  (importColumns) => {
    if (!importColumns) return
    importFormData.value = importColumns
  },
  {
    deep: true,
    immediate: true
  }
)
/** 新增按钮操作 */
const handleAdd = () => {
  const row = {
    javaField: undefined, //字段名称
    columnComment: undefined, //字段描述
    javaType: undefined, //java 类型
    nullable: true,//是否允许为空
    note: undefined,//批注
    dictType: undefined,//字典类型
    functionName: undefined,//方法名称
    example: undefined,//示例
  }
  row.tableId = props.tableId
  importFormData.value.push(row);
}
/** 删除按钮操作 */
const handleDelete = (index) => {
  importFormData.value.splice(index, 1)
}
/** 查询字典下拉列表 */
const dictOptions = ref<DictDataApi.DictTypeVO[]>()
const getDictOptions = async () => {
  dictOptions.value = await DictDataApi.getSimpleDictTypeList()
}


defineExpose({
  validate: async () => unref(formRef)?.validate()
})
onMounted(async () => {
  await getDictOptions()
})
</script>
